<template>
  <el-affix>
  <header>
<span>
<el-icon class="icono" @click="back"><Back /></el-icon>

</span>
<span class="baga">
    我的病友圈
</span>


  </header>
  </el-affix>

  <main>
<div class="hz"  v-for="(item, index) in patientData" :key="index">
<div class="left">
<span class="ri">
05

</span>
<span class="yue">
01月

</span>
</div>
<div class="right">
<div class="you">

<h3>{{ item.title }}</h3>
<p>
  {{ item.detail }}
</p>

<button class="lan" @click="byqlb(item.sickCircleId)">查看评论 >></button>
</div>

</div>

</div>
<div class="zhong">
<h2>2018年</h2>
</div>
<div class="hz">
<div class="left">
<span class="ri">
23

</span>
<span class="yue">
12月

</span>
</div>
<div class="right">
<div class="you">

<h3>胃真的会被越撑越大，越饿越小吗?</h3>
<p>

吃饭时，我们经常能听到有些克制的姑娘
说“不能再吃了，不然胃要被撑大了!
</p>

<button class="lan" @click="byqlb">查看评论 >></button>
</div>

</div>

</div>
<div class="hz">
<div class="left">
<span class="ri">
12

</span>
<span class="yue">
11月

</span>
</div>
<div class="right">
<div class="you">

<h3>女性膝盖痛--警惕髌股关节病</h3>
<p>
膝前疼痛是常见的疾病，很多人认为是关节炎
或损伤后遗症，但髌骨不稳定往往被忽略...
</p>

<button class="lan" @click="byqlb">查看评论 >></button>
</div>

</div>

</div>
<div class="hz">
<div class="left">
<span class="ri">
14

</span>
<span class="yue">
10月

</span>
</div>
<div class="right">
<div class="you">

<h3>怎么把熬夜伤害降到最低</h3>
<p>

古时候，人们日出而作，日落而息，让身体听
从大自然的安排。而现今，由于工作忙…
</p>

<button class="lan" @click="byqlb(item.sickCircleId)">查看评论 >></button>
</div>

</div>

</div>

  </main>



</template>

<script setup lang="ts">
import { findMySickCircleList } from '../../api/search'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const patientData:any= ref({})
const findMySickCircleList1 = async () => {
  const res = await findMySickCircleList(userId.value, sessionId.value, {
    page: 1,
    count:20
  })
  console.log('我发布的病友圈', res)
  patientData.value = res.data.result
}
findMySickCircleList1()


// 返回
const back=()=>{
    router.go(-1)
}
// 跳转评论列表
const byqlb=(sickCircleId: number)=>{
      console.log(sickCircleId)
  localStorage.setItem('sickCircleId', JSON.stringify(sickCircleId))
    router.push('/pllb')

}

</script>

<style scoped lang="scss">

.lan{
    color: blue;
    background-color: #fff;
    border: none;
    position: absolute;
    font-size: 10px; // 20px * 0.5
    bottom: 5%; // 2.8% * 0.5
    right:2%; // 2% * 0.5
}
.zhong{
    width: 100%;
    height: 1rem; // 1rem * 0.5

    h2{
        margin-left: 0.5rem; // 0.5rem * 0.5
        line-height: 1.5rem; // 1.5rem * 0.5
    }

}
header{
    width: 100%;
    height: 1.2rem; // 1.2rem * 0.5
    line-height: 0.6rem;
    border-bottom: 0.1rem solid rgb(242, 242, 242); // 0.2rem * 0.5
    display: flex;
    align-items: center;
    position: relative;
  .icono{
        font-size: 0.6rem; // 0.6rem * 0.5
        position: absolute;
        top: 35%; // 37% * 0.5
        left: 7%; // 7% * 0.5
    }
}
.baga{
    font-size: 0.4rem; // 0.4rem * 0.5
    font-weight: 550;
    position: absolute;
    top: 35%; // 10% * 0.5
    left: 39%; // 39% * 0.5
}

main{
    width: 100%;

  .hz{
        width: 100%;
        height: 3rem; // 3rem * 0.5
        margin-top: 0.5rem ; // 0.5rem * 0.5
        display: flex;
      .left{
            width: 2.2rem; // 2.2rem * 0.5
            height: 100%;
            position: relative;
          .ri{
                position: absolute;
                top: 10%; // 10% * 0.5
                left: 25%; // 25% * 0.5
                font-size: 18px; // 36px * 0.5
                font-weight: 600;
            }
          .yue{
                position: absolute;
                top: 25%; // 25% * 0.5
                left: 50%; // 50% * 0.5
                font-size: 0.35rem; // 0.35rem * 0.5
                font-weight: 550;
            }
        }
      .right{
            width: 7.8rem; // 7.8rem * 0.5
            height: 100%;

          .you{
                width: 94%;
                height: 96%;
                margin-top: 4%; // 4% * 0.5
                margin-left: 0.5%; // 0.5% * 0.5
                border-radius: 0.2rem; // 0.2rem * 0.5
                border: 0.5px solid #ccc; // 1px * 0.5
                position: relative;
                h3{
                    margin-left: 10px; // 10px * 0.5
                    line-height: 1rem;
                }
                p{
                    color: #6b6b6b;
                    margin-left: 10px; // 10px * 0.5
                    font-size: 13px; // 26px * 0.5
                }

            }
        }
    }
}



</style>
